<template>
  <div :class="tableClass"
       v-loading="loading">
    <template v-if="data && data.length">
      <el-table border
                v-bind="$attrs"
                v-on="$listeners"
                :data="data"
                :row-key="rowKey"
                :expand-row-keys="expandRowKeys"
                @expand-change="handleExpandChange"
                @sort-change="sortChange"
                :default-sort="{ prop: defaultSort, order: 'descending' }">
        <el-table-column width="1"
                         v-if="isExpand"
                         type="expand">
          <template slot-scope="scope">
            <slot name="expand"
                  :row="scope.row" :index="scope.$index"></slot>
          </template>
        </el-table-column>
        <template v-for="(item, index) in columns">
          <el-table-column v-if="item.isSlot"
                           :key="index"
                           v-bind="item"
                           :sortable="item.sortable"
                           :show-overflow-tooltip="item.showOverflowTooltip === undefined ? true : item.showOverflowTooltip">
            <template slot-scope="scope">
              <slot :name="item.prop"
                    :prop="item.prop"
                    :row="scope.row"
                    :index="scope.$index"></slot>
            </template>
          </el-table-column>
          <el-table-column v-else
                           :key="index"
                           v-bind="item"
                           :sortable="item.sortable"
                           :show-overflow-tooltip="item.showOverflowTooltip === undefined ? true : item.showOverflowTooltip">
          </el-table-column>
        </template>
      </el-table>
      <template v-if="pager">
        <el-pagination v-if="data.length > 0"
                       background
                       layout="slot, prev, pager, next"
                       @current-change="handleChangePage"
                       :page-size="pageSize"
                       :current-page="pageIndex"
                       :total="pageTotal">
          <span class="total-num">共计{{ pageTotal }}条</span>
        </el-pagination>
      </template>
    </template>
    <div v-else>
      <div v-if="isShowNull"
           class="nodata">
        <img src="./../assets/images/address-empty.png"
             alt="nodata"
             class="address-empty">
        <span>暂无数据</span>
      </div>

    </div>
  </div>
</template>

<script>
export default {
  name: 'ElementTable',
  props: {
    tableClass: {
      type: String,
      default: 'common-table'
    },
    defaultSort: {
      type: String,
      default: ''
    },
    isExpand: {
      type: Boolean,
      default: false
    },
    rowKey: {
      type: Function,
      default: (row) => row.id
    },
    expandRowKeys: {
      type: Array,
      default: () => []
    },
    loading: {
      type: Boolean,
      default: false
    },
    // table data
    data: {
      type: Array
    },
    // columns
    columns: {
      type: Array
    },
    showTooltip: {
      type: Boolean,
      default: true
    },
    pager: {
      type: Boolean
    },
    pageTotal: {
      type: Number,
      default: 1
    },
    pageIndex: {
      type: Number,
      default: 1
    },
    pageSize: {
      type: Number,
      default: 10
    },
    isShowNull: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {}
  },
  inheritAttrs: false,
  methods: {
    sortChange(column) {
      this.$emit('sortChange', {...column})
    },
    // When the current page changes
    handleChangePage(page) {
      this.$emit('handleChangePage', page)
    },
    handleExpandChange(row, expandedRows) {
      this.$emit('handleExpandChange', row, expandedRows)
    }
  }
}
</script>
<style lang="scss">
.common-table {
  padding-bottom: 30px;

  &::after {
    content: '';
    display: block;
    clear: both;
    width: 0;
    height: 0;
  }

  .el-pagination {
    // float: right;
    margin-top: 30px;
    text-align: right;
    // margin-right: 30px;
    .total-num {
      margin-right: 15px;
      font-weight: normal;
      color: #575e6e;
    }
  }

  .nodata {
    margin-top: 100px;
    height: 300px;
    text-align: center;
    position: relative;

    > span {
      position: absolute;
      left: 50%;
      transform: translateX(-45%);
      top: 135px;
      color: #8d93a1;
      font-size: 14px;
    }
  }
}
</style>
